<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登陆界面</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/3.2.20/ant-design-vue.min.css">
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer">
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
    integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/3.2.20/ant-design-vue.min.js"></script>
</head>
<template>
  <div class="login-container">
    <div class="login-banner">
      <div class="banner-content">
        <div class="logo">
          <rocket-two-tone class="logo-icon" />
          <h1>12306售票系统</h1>
        </div>
        <div class="features">
          <div class="feature-item">
            <check-circle-outlined class="feature-icon" />
            <span>安全可靠，官方认证</span>
          </div>
          <div class="feature-item">
            <check-circle-outlined class="feature-icon" />
            <span>实时查询，便捷购票</span>
          </div>
          <div class="feature-item">
            <check-circle-outlined class="feature-icon" />
            <span>快速改签，无忧出行</span>
          </div>
        </div>
      </div>
    </div>

    <div class="login-form-container">
      <div class="form-header">
        <div class="tabs">
          <div class="tab" :class="{ active: activeTab === 'mobile' }" @click="switchTab('mobile')">手机号登录</div>
          <div class="tab" :class="{ active: activeTab === 'account' }" @click="switchTab('account')">账号登录</div>
        </div>
      </div>

      <div class="form-body">
        <a-form
            :model="loginForm"
            name="basic"
            autocomplete="off"
            :class="{ show: activeTab === 'mobile' }"
            class="mobile-login-form"
        >
          <div class="input-group">
            <a-form-item
                name="mobile"
                :rules="[{ required: true, message: '请输入手机号!' }]"
            >
              <div class="input-with-icon">
                <user-outlined class="input-icon" />
                <a-input
                    v-model:value="loginForm.mobile"
                    placeholder="如果您第一次登陆，将自动注册该手机号"
                    size="large"
                />
              </div>


            </a-form-item>

            <a-form-item
                name="code"
                :rules="[{ required: true, message: '请输入验证码!' }]"
            >
              <div class="input-with-icon">
                <lock-outlined class="input-icon" />
                <a-input
                    v-model:value="loginForm.code"
                    placeholder="请输入验证码"
                    size="large"
                >
                  <template #addonAfter>
                    <a @click="sendCode" class="code-btn">获取验证码</a>
                  </template>
                </a-input>
              </div>
            </a-form-item>


            <a-form-item>
              <a-button
                  type="primary"
                  block @click="login"
                  html-type="submit"
                  size="large"
                  class="login-btn"
              >
                登录
              </a-button>
            </a-form-item>
          </div>

        </a-form>
        <!-- 账号登录表单 -->
<!--        <div class="account-login-form" :class="{ show: activeTab === 'account' }">-->
<!--          <div class="input-group">-->
<!--            <label>用户名/邮箱</label>-->
<!--            <div class="input-with-icon">-->
<!--              <i class="fas fa-user input-icon"></i>-->
<!--              <input type="text" v-model="accountForm.username" placeholder="请输入用户名或邮箱">-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="input-group">-->
<!--            <label>密码</label>-->
<!--            <div class="input-with-icon">-->
<!--              <i class="fas fa-lock input-icon"></i>-->
<!--              <input type="password" v-model="accountForm.password" placeholder="请输入您的密码">-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="remember-row">-->
<!--            <div class="remember-me">-->
<!--              <input type="checkbox" id="rememberAccount" v-model="accountForm.remember">-->
<!--              <label for="rememberAccount">记住账号</label>-->
<!--            </div>-->
<!--            <div class="remember-me">-->
<!--              <input type="checkbox" id="autoLogin" v-model="accountForm.autoLogin">-->
<!--              <label for="autoLogin">自动登录</label>-->
<!--            </div>-->
<!--          </div>-->

<!--          <button class="login-btn">登录</button>-->
<!--        </div>-->
        <div class="divider">其他登录方式</div>

        <div class="other-login">
          <div class="login-option">
            <i class="fab fa-weixin"></i>
          </div>
          <div class="login-option">
            <i class="fab fa-qq"></i>
          </div>
          <div class="login-option">
            <i class="fab fa-alipay"></i>
          </div>
          <div class="login-option">
            <i class="fas fa-fingerprint"></i>
          </div>
        </div>
        <div class="login-links">
          <a href="#">注册账号</a>
          <a href="#">忘记密码</a>
          <a href="#">国际版</a>
          <a href="#">English</a>
        </div>
      </div>

      <div class="service-info">
        <info-circle-outlined class="info-icon" />
        <p>铁路12306每日5:00至次日1:00（周二为5:00至24:00）提供购票、改签、变更到站业务办理，全天均可办理退票等其他服务。</p>
      </div>
    </div>

    <div class="footer">
      <p>中午说话天底下她最大铁路公司 版权所有 | 京ICP备114514号-3 | 京公网安备1919810号</p>
      <div class="footer-links">
        <a href="#">网站声明</a>
        <a href="#">关于我们</a>
        <a href="#">广告服务</a>
        <a href="#">人才招聘</a>
        <a href="#">旅客服务</a>
        <a href="#">会员服务</a>
        <a href="#">商务合作</a>
        <a href="#">网站地图</a>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive,ref } from 'vue';
import axios from 'axios';
import { notification } from 'ant-design-vue';
import {useRouter} from "vue-router";
import store from "@/store";
import {
  RocketTwoTone,
  UserOutlined,
  LockOutlined,
  CheckCircleOutlined,
  InfoCircleOutlined
} from '@ant-design/icons-vue';

export default defineComponent({
  name: "login-view",
  components: {
    RocketTwoTone,
    UserOutlined,
    LockOutlined,
    CheckCircleOutlined,
    InfoCircleOutlined
  },

  setup() {
    const activeTab=ref('mobile');
    const router=useRouter();
    const loginForm = reactive({
      mobile: '',
      code: '',
    });
    const accountForm=ref({
      username: '',
      password: '',
      remember: false,
      autoLogin: false
    })
    const switchTab = (tab) => {
      activeTab.value = tab;
    };
    const accountLogin = () => {
      if (!accountForm.value.username || !accountForm.value.password) {
        alert('请输入用户名和密码');
        return;
      }

      setTimeout(() => {
        alert('账号登录成功');
      }, 1500);
    };
    const sendCode = () => {
      axios.post("/member/member/send-code", {
        mobile: loginForm.mobile
      }).then(response=>{
        console.log(response);
        let data = response.data;
        if (data.success) {
          notification.success({ description: '发送验证码成功！' });
        } else {
          notification.error({ description: data.message });
        }
      });
    };
    const login = () => {
      axios.post("/member/member/login", loginForm).then(response => {
        let data = response.data;
        if (data.success) {
          notification.success({ description: '登录成功！' });
          console.log("登录成功：", data.content);
          //登陆成功，跳转到控台主页
          router.push("/welcome");
          store.commit("setMember",data.content);
        } else {
          notification.error({ description: data.message });
        }
      })
    };
    return {
      activeTab,
      loginForm,
      accountForm,
      sendCode,
      login,
      switchTab,
      accountLogin
    };
  },
  mounted() {
    // 动态加载Font Awesome
    const faScript = document.createElement('script');
    faScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js';
    faScript.integrity = 'sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2PjHXf9ttdDf6dRg+QkGqJ9YtRkU6fTfDq7vX9Yr+ZR0iKX9Qe24w8v8vQ==';
    faScript.crossOrigin = 'anonymous';
    document.head.appendChild(faScript);
  }
});
</script>

<style scoped>
.login-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a6dcc 0%, #0d4a9e 100%);
  padding: 20px;
  position: relative;
}

.login-banner {
  flex: 1;
  background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
  border-radius: 10px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 40px;
}

.login-banner::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.divider {
  text-align: center;
  margin: 30px 0;
  position: relative;
  color: #999;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #eee;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}
.login-banner::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  color: white;
  z-index: 2;
  position: relative;
}
.account-login-form {
  display: none;
}

.account-login-form.show, .mobile-login-form.show {
  display: block;
}
.logo-icon {
  font-size: 66px;
  margin-right: 15px;
  color: #ffcc00;
}

.logo h1 {
  font-size: 54px;
  font-weight: bold;
  margin: 0;
}

.features {
  margin-top: 40px;
  z-index: 2;
  position: relative;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: white;
  font-size: 28px;
}

.feature-icon {
  font-size: 28px;
  margin-right: 12px;
  color: #ffcc00;
}

.login-form-container {
  flex: 1;
  max-width: 480px;
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.form-header {
  margin-bottom: 30px;
}

.tabs {
  display: flex;
  border-bottom: 2px solid #eee;
}

.tab {
  padding: 12px 30px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  color: #999;
  position: relative;
}

.tab.active {
  color: #0066cc;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0066cc;
}

.input-group {
  margin-bottom: 25px;
  position: relative;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.input-with-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 18px;
  z-index: 1;
}

input {
  width: 100%;
  height: 52px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0 20px 0 50px;
  font-size: 16px;
  transition: all 0.3s;
}

input:focus {
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
  outline: none;
}

:deep(.ant-input) {
  padding-left: 45px !important;
  height: 48px;
  border-radius: 5px;
}

:deep(.ant-input-group-addon) {
  background: none;
  border: none;
  padding: 0;
}

.code-btn {
  display: block;
  padding: 0 15px;
  height: 48px;
  line-height: 48px;
  color: #0066cc;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.code-btn:hover {
  color: #0052a3;
}

.login-btn {
  height: 48px;
  font-size: 18px;
  font-weight: bold;
  background: #0066cc;
  border: none;
  transition: all 0.3s;
}

.login-btn:hover {
  background: #0052a3;
}

.other-login {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 30px;
}

.login-option {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  cursor: pointer;
  transition: all 0.3s;
}

.login-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.login-option i {
  font-size: 24px;
  color: #555;
}

.login-links {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.login-links a {
  color: #0066cc;
  text-decoration: none;
  font-size: 14px;
}

.login-links a:hover {
  text-decoration: underline;
}
.service-info {
  margin-top: 40px;
  padding: 15px;
  background: #f5f9ff;
  border-radius: 5px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  border-left: 4px solid #0066cc;
  display: flex;
}

.info-icon {
  font-size: 20px;
  color: #0066cc;
  margin-right: 10px;
  flex-shrink: 0;
  margin-top: 3px;
}

.service-info p {
  margin: 0;
}

.footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  padding: 20px;
}

.footer p {
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-links a:hover {
  color: white;
  text-decoration: underline;
}

@media (max-width: 992px) {
  .login-container {
    flex-direction: column;
    padding: 10px;
  }

  .login-banner {
    margin-right: 0;
    margin-bottom: 20px;
    padding: 25px;
  }

  .logo {
    flex-direction: column;
    text-align: center;
  }

  .logo-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .login-form-container {
    max-width: 100%;
  }

  .tabs {
    justify-content: center;
  }

  .footer {
    position: relative;
    margin-top: 30px;
  }
}
</style>